<template>
<div id="out19">
    <div id="top3">
		<a href="#/DaiFahuo"><img id="imgTop1" src="../assets/img/duanhuowang/zuojiantou.png" alt=""/></a>
		<span>订单详情</span>
	</div>
	<div class="back"></div>
	<div class="daiShou">
		<p class="tit">待收货</p>
		<p>已签收：额呃呃鹅鹅鹅鹅鹅鹅额呃呃鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅呃呃呃</p>
		<p>2017-07-01</p><span></span>
		<p class="daoJi"><span><span>16</span>天<span>16</span>小时<span>56</span>分<span>19</span>秒</span>后系统将自动确认收货</p>
	</div>
	<div class="addddd">
		<div>
			<p class="tit"><span>李四</span>15012340708</p>
			<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
		</div>
	</div>
	<div class="shiming2">
		<p>实名信息</p>
		<p>李四 <span>4107*************5</span></p>
		<p>
			<div>身份证正面照片</div>
			<div>身份证反面照片</div>
		</p>
	</div>
	<p class="riBen">日本直邮</p>
	<div class="shopppp">
      	<img src="../assets/img/shouye/2zeidianji/huihuxisihuafenmi.png" alt=""/>
      	<div>
      		<p class="title">会呼吸丝滑蜜粉</p>
      		<p>规格：蜜粉</p>
      		<p class="price">￥166.06 <span>x1件</span></p>
      	</div>
      	<span>发表心情</span>
      </div> 
      <p class="jinE">订单金额<span>￥226.06</span></p>
      <p class="jinE">商品金额<span>￥166.06</span></p>
      <p class="jinE">订单邮费<span>￥50.00</span></p>
      <p class="jinE guanShui">关税<span>￥10</span></p>
      <p class="jinE">联系客服：<span class="gongZuo">工作时间：<span>9:00-24:00</span></span></p>
      <p class="anquanT"><span>安全提醒：</span>付款成功后，阿拉德不少时诵诗书所所所所所所所所所所所所换衣服看演出 多个人多个地方还有人的预热钢铁等人共同认定他人也都放过任何突发规划用途</p>
      <p class="botto6">订单编号：1485269676465</p>
      <p class="botto6">下单时间：2017-06-23 12:02:54</p>
      <div class="bottomBtn">
      	 <span>退货退款</span>
      	 <span class="righttt">确认收货</span>
      </div>
</div>
</template>

<script>
	export default {
		name: '',
		methods: {
			round2: function() {
				var d=16;
				var h=16;
				var m=56;
				var s=19;
				setInterval(jiShiss,1000);
				function jiShiss(){
					s--;
					if (s<=0) {
						m--;
						s=59;
					};
					if (m<=0) {
						h--;
						m=59;
					};
					if (h<=0) {
						d--;
						h=23;
					};
					$("#out19 .daoJi>span>span").eq(0).text(d>=10?d:"0"+d);
					$("#out19 .daoJi>span>span").eq(1).text(h>=10?h:"0"+h);
					$("#out19 .daoJi>span>span").eq(2).text(m>=10?m:"0"+m);
					$("#out19 .daoJi>span>span").eq(3).text(s>=10?s:"0"+s);
				};
			},
		},
		mounted: function() {
			//只有在mounted之后，才可以执行dom操作，也就是说可以在这个方法里面执行那些需要加载立即执行的方法
			this.round2();
		},
	}
</script>

<style>
	#out19{
		background-color: #f2f2f2;
		height: 100vh;
		overflow: scroll;
	}
	#out19>.back{
		height: 9.6rem;
	}
	#out19 #top3 {
		width: 100vw;
		height: 9.6rem;
		background: #e53e42;
		color: white;
		display: flex;
		position: fixed;
		z-index: 10;
		align-items: center;
		text-align: center;
		justify-content: space-around;
	}
	#out19 #imgTop1 {
		width: 2.3rem;
		height: 3.8rem;
	}
	
	#out19 #top3>span {
		width: 57.6rem;
		height: 3.6rem;
		font-family: MicrosoftYaHei;
		font-size: 3.6rem;
		font-weight: normal;
		font-stretch: normal;
		line-height: 3.6rem;
		letter-spacing: 0px;
		box-sizing: border-box;
		padding-right: 9rem;
	}
	#out19>.daiShou{
		height: 22.2rem;
		background-color: #666666;
		padding: 2rem;
		box-sizing: border-box;
	}
	#out19>.daiShou>p{
		font-size: 2.4rem;
		color: #FFFFFF;
		width: 54.5rem;
		line-height: 3rem;
		padding-top: 1rem;
	}
	#out19>.daiShou>.tit{
		padding-top: 0;
		font-size: 2.8rem;
		color: #ffd21f;
		padding-bottom: 1rem;
	}
	#out19>.daiShou>.daoJi{
		padding-top: 1rem;
	}
	#out19>.daiShou>.daoJi>span{
		color: #ffd21f;
	}
	#out19 .addddd{
		width: 100vw;
		height: 16rem;
		display: flex;
		align-items: center;
		justify-content: flex-start;
        background: white;
        padding-left: 2.5rem;
        margin: 2rem 0;
	}
	#out19 .addddd>div{
		width: 47rem;
		height: 16rem;
	}
	#out19 .addddd>div>.tit{
		font-size: 2.8rem;
		color: #4d4d4d;
		padding-top: 2rem;
		padding-bottom: 3rem;
	}
	#out19 .addddd>div>.tit>span{
		padding-right: 7rem;
	}
	#out19 .addddd>div>p{
		font-size: 2.4rem;
		color: #808080;
		line-height: 3rem;
	}
	#out19>.shiming2{
		font-size: 3rem;
		height: 28rem;
		color: #4d4d4d;
		background: #FFFFFF;
		margin: 2rem 0;
		padding: 2rem;
		box-sizing: border-box;
	}
	#out19>.shiming2>p>span{
		padding-left: 5rem;
	}
	#out19>.shiming2>p{
		margin-bottom: 3rem;
	}
	#out19>.shiming2>div{
		width: 20rem;
		height: 12rem;
		border: 0.1rem solid #CCCCCC;
		text-align: center;
		line-height: 12rem;
		font-size: 1.8rem;
		display: inline-block;
	}
	#out19>.riBen{
		font-size: 2.8rem;
		background: #FFFFFF;
		padding: 2rem;
	}
	#out19 .shopppp{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 20rem;
		background: #FFFFFF;
		margin-bottom: 2rem;
	}
	#out19 .shopppp>img{
		width: 8.6rem;
		height: 10rem;
	}
	#out19 .shopppp>div{
		font-size: 2.4rem;
		color: #666666;
		margin-left: 9rem;
		padding-right: 10rem;
	}
	#out19 .shopppp>div>.title{
		font-size: 2.8rem;
		margin-bottom: 3rem;
	}
	#out19 .shopppp>div>.price{
		margin-top: 4rem;
		color: #FF0000;
	}
	#out19 .shopppp>div>.price>span{
		color: #808080;
		padding-left: 4rem;
	}
	#out19 .shopppp>span{
		width: 12rem;
		height: 4rem;
		background:  #e53e42;
		border-radius: 2rem;
		text-align: center;
		line-height: 4rem;
		color: #FFFFFF;
		font-size: 2.4rem;
		transform: translate(4rem,7rem);
	}
	#out19>.jinE{
		font-size: 3rem;
		padding: 2rem;
		background: #FFFFFF;
	}
	#out19>.jinE>span{
		float: right;
		color: #FF0000;
	}
	#out19>.jinE>.gongZuo{
		color: #4d4d4d;
	}
	#out19>.jinE>.gongZuo>span{
		color: #FF0000;
	}
	#out19>.guanShui{
		border-top: 0.1rem solid #CCCCCC;
		margin-bottom: 2rem;
	}
	#out19>.anquanT{
		font-size: 2.4rem;
		color: #666666;
		background: #FFFFFF;
		padding: 2rem;
		margin-bottom: 2rem;
	}
	#out19>.anquanT>span{
		color: #FF0000;
		font-size: 2.8rem;
	}
	#out19>.botto6{
		font-size: 2.8rem;
		padding: 2rem;
		background: #FFFFFF;
		color: #4d4d4d;
	}
	#out19>.bottomBtn{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 2rem;
	}
	#out19>.bottomBtn>span{
		width: 12rem;
		height: 4rem;
		background-color: #e53e42;
		border-radius: 1.8rem;
		font-family: MicrosoftYaHei;
		font-size: 2.4rem;
		line-height: 4rem;
		text-align: center;
		color: #ffffff;
		margin-right: 2rem;
	}
	#out19>.bottomBtn>.righttt{
		margin-right: 0;
	}
</style>